<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>42 - XMLHttpRequest</title>
</head>
<body>
    <script>

        // XMLHttpRequest

        // 1. XMLHttpRequest 是 js 中一个内置的构造函数
        // 2. XMLHttpRequest的作用:
        // a) 创建对象
        // b) XMLHttpRequest 创建的对象, 就是axios 或者 jQuery 实现 Ajax 请求的对象
        // c) axios 或者 jQuery 实现 Ajax 请求, 核心的原理使用了 XMLHttpRequest





        // XMLHttpRequest 使用
        // 1. 通过 XMLHttpRequest 创建实例对象
        let xhr = new XMLHttpRequest();
        // 2. 设置请求方式和请求地址
        // xhr.open('请求方式', '请求地址');
        xhr.open('get', 'http://www.liulongbin.top:3006/api/get');

        // 3. 发送Ajax请求
        xhr.send();
        // 4. 发送完请求,获取服务端的响应结果  load事件
        // window 注册load事件
        // xhr注册load事件,当前请求完成后,自动触发load事件
        xhr.onload = function() {
            // 获取服务端响应结果
            // 事件源.response();
            console.log(this.response);
        };





        // XMLHttpRequest 总结
        // 1. XMLHttpRequest 实现 Ajax 请求的时候前3步不能省略, 必须写!!!
        // 2. XMLHttpRequest 实现 Ajax 请求的时候,获取服务端响应结果可写可不写, 推荐写 
        // 3. XMLHttpRequest 实现 Ajax 请求的时候, open 方法必须在 send 方法前面, 二者的顺序不能调换位置 (记住)
        // 4. XMLHttpRequest 实现 Ajax 请求的时候, load 事件获取响应结果位置可以在任何地方写 (记住)
    









        // XMLHttpRequest 实现带有查询参数的 get 请求

        // 如果 get 请求带有了查询参数, 查询参数是通过什么形式发送给服务端?
        // 查询参数以拼接字符串的形式发送给服务端
        // 格式     xxxx地址?键=值&键=值


        // 由于axios中查询参数设置的时候是一个对象的格式
        let params = {
            aa: 1,
            bb: 2,
            cc: 3
        };

        // 将上面的对象转换为: 键=值&键=值 字符串,然后拼接到请求url地址后面
        // 如何将以上对象转换为固定格式的字符串:  aa=1&bb=2 
        // 分析:
        // 获取对象中的键和对象中的值, 遍历对象!!!!
        // 将键和值拼接成对应的字符串
        // 借助数组实现
        let ary = [];
        for (key in params) {
            ary.push(key + '=' + params[key]);
        };
        // 将数组中的值拼接字符串
        let str = ary.join('&');

        // 只要将str拼接到请求地址的后面就可以了

        // 发送一个带有查询参数的get请求
        let xhr1 = new XMLHttpRequest();
        xhr1.open('get', 'http://www.liulongbin.top:3006/api/get?' + str);
        xhr1.send();
        xhr1.onload = function () {
            console.log(this.response);
        };
    








        
        // XMLHttpRequest 实现 post 请求

        // post 请求     向服务端增加数据, 考虑数据体格式


        // 通过 XMLHttpRequest 实现post请求:
        // a) 当发送post请求的时候,必须考虑请求体(数据体)的格式
        // b) 请求体(数据体)格式:
        // ☛ 默认值:   application/x-www-form-urlencoded      数据格式:   xxx键=值&xxx键=值
        // ☛ form-data值            数据格式: 通过借用 FormData构造函数实现

        // 1. 通过 XMLHttpRequest 实现默认值对应的数据格式
        // 步骤:
        // a) 先实例化一个XMLHttpRequest对象
        let xhr2 = new XMLHttpRequest();
        // b) 通过对象设置请求方式和请求地址
            xhr2.open('post', 'http://www.liulongbin.top:3006/api/post');
        // c) 设置请求体(数据体)格式
            xhr2.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        // d) 设置请求体(数据体), post请求中,请求体在send方法中设置的
            xhr2.send('aa=1&bb=2&cc=3');
        // e) 获取post请求的响应结果
            xhr2.onload = function() {
                console.log(this.response);
            };
        
    



    

    </script>
</body>
</html>




